<template>
	<!-- 职位发布 -->
	<view class="JobPosting">
		<view class="empty"></view>
		<view class="main">
			<view class="main-item">
				<view class="main-item-left">
					职位发布
				</view>
				<view class="main-item-right">
					<input type="text" placeholder="输入职位" v-model="form.title">
				</view>
			</view>
			<view class="main-item">
				<view class="main-item-left">
					工作类型
				</view>
				<view class="main-item-right">
					<view :class="form.type == item.id ? 'JobTypeSelected' : 'JobType'" v-for="(item, index) in JobType"
						:key="index" @click="eventSelect(item.id)">
						{{ item.name }}
					</view>
				</view>
			</view>
			<view class="main-item">
				<view class="main-item-left">
					招聘人数
				</view>
				<view class="main-item-right">
					<input type="number" placeholder="输入人数" v-model="form.num">
				</view>
			</view>
			<view class="main-item">
				<view class="main-item-left">
					薪酬
				</view>
				<view class="main-item-right">
					<input type="number" placeholder="输入薪酬" v-model="form.salary">
				</view>
			</view>
			<view class="main-item-textarea">
				<view class="main-item-left">
					职位描述
				</view>
				<view class="main-item-right">
					<textarea name="" placeholder="输入职位详情描述" v-model="form.desc"></textarea>
				</view>
			</view>
			<view class="main-item">
				<view class="main-item-left">
					性别要求
				</view>
				<view class="main-item-right">
					<view :class="form.sex == item.id ? 'JobTypeSelected' : 'JobType'" v-for="(item, index) in sexType" :key="index"
						@click="sexChange(item.id)">
						{{ item.name }}
					</view>
				</view>
			</view>
			<view class="main-item">
				<view class="main-item-left">
					经验要求
				</view>
				<view class="main-item-right">
					<input type="number" placeholder="输入要求" v-model="form.experience">
				</view>
			</view>
			<view class="main-item">
				<view class="main-item-left">
					年龄要求
				</view>
				<view class="main-item-right">
					<input type="number" placeholder="输入要求" v-model="form.age">
				</view>
			</view>
			<view class="main-item">
				<view class="main-item-left">
					联系方式
				</view>
				<view class="main-item-right">
					<input type="number" maxlength="11" placeholder="输入联系方式" v-model="form.mobile">
				</view>
			</view>
		</view>
		<view class="footer-button">
			<button @click="eventtitle">发布</button>
		</view>
	</view>
</template>

<script>
const $api = require('@/utils/request.js').API

export default {
	data() {
		return {
			// 类型
			JobType: [

				{
					name: '兼职',
					id: 1
				},
				{
					name: '全职',
					id: 2
				},
			],
			// 性别
			sexType: [
				{
					name: '不限',
					id: 0
				},
				{
					name: '男',
					id: 1
				},
				{
					name: '女',
					id: 2
				}
			],
			form: {
				// 输入框值
				title: '',	// 职位发布
				type: 1,// 类型
				num: '',	// 招聘人数
				salary: '',	// 薪酬
				desc: '',	// 描述
				sex: 0,	// 性别
				experience: '',	// 经验
				age: '',	// 年龄
				mobile: '', // 联系方式
			}
		}
	},
	methods: {
		// 发布
		eventtitle() {
			$api.jobAdd(this.form).then(res => {
				uni.navigateBack({
					delta: 1
				});
			})
		},
		// 选择工作类型
		eventSelect(id) {
			this.form.type = id
		},
		// 选择性别
		sexChange(id) {
			this.form.sex = id
		}
	}
}
</script>

<style lang="less" scoped>
.JobPosting {
	background: #FBFBFB;

	.empty {
		height: 21rpx;
	}

	.JobTypeSelected {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 92rpx;
		height: 38rpx;
		border: 1px solid #F14500;
		border-radius: 19rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #F14500;
		margin-left: 16rpx;
	}

	.JobType {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 92rpx;
		height: 38rpx;
		border: 1px solid #D4D4D4;
		border-radius: 19rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #91908F;
		margin-left: 16rpx;
	}

	.main {
		width: 690rpx;
		margin: auto;

		.main-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 690rpx;
			height: 96rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			margin-top: 12rpx;
			padding: 0 34rpx 0 33rpx;

			.main-item-right {
				display: flex;
				text-align: right;
				// .main-item-right-item {
				// 	display: flex;
				// 	justify-content: center;
				// 	align-items: center;
				// 	width: 92rpx;
				// 	height: 38rpx;
				// 	border: 1px solid #D4D4D4;
				// 	border-radius: 19rpx;
				// 	font-size: 22rpx;
				// 	font-family: PingFang SC;
				// 	font-weight: 400;
				// 	color: #91908F;
				// 	margin-left: 16rpx;
				// }
			}
		}

		.main-item-textarea {
			display: flex;
			width: 690rpx;
			height: 137rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			margin-top: 12rpx;
			padding: 38rpx 34rpx 39rpx 33rpx;

			.main-item-right {
				padding-left: 31rpx;

				textarea {
					width: 469rpx;
					height: 70rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
				}
			}
		}
	}

	.footer-button {
		padding-top: 290rpx;

		button {
			width: 702rpx;
			height: 98rpx;
			background: #F14500;
			border-radius: 49rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 98rpx;
		}
	}
}
</style>